</<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style type="text/css">

h1{
    color: white;
    float:left
}
b{
    font-size: 20px;
    margin-left: 30px;
    color: rgba(255, 138, 36, 0.7)
}
    td {
        padding: 8px;
        border-bottom: solid 1px white;
    }
    .sure{
        color: red;
    }
    input{
        height: 35px;
        border-radius: 5px;
    }
    table {
        padding: 0 auto;
        margin: 0 auto;
        text-align: center;
        width: 320px;
        border-collapse:collapse;
        background-color: rgba(255, 138, 36, 0.7);
        border-radius: 20px;
    }
    html{
        height: 100%;
    }
    body{
        background-repeat: no-repeat;

        background-position: center center;

        background-color: #00BDDC;


        background-size: 100% 100%;
        position: relative;
        margin: 0 auto;
        padding: 0 auto;
    }
    .content{
        width: 100%;
        position: relative;
        top: 15%;
        z-index: 100;
        background-color: rgba(248, 255, 244, 0.4);
        clear: both;
    }
    .loading{
    display: none;
}
/*.snow{position:absolute;top:20%;width:100%;height:40rem;background: url(images/snowy.gif) repeat-y center;z-index: -1;-webkit-animation: snow 9s linear infinite;animation: snow 9s linear infinite;}
@-webkit-keyframes snow{0% { background-position: center 0, 0 0;}100% { background-position: center 885px, 0 0;}
}
@keyframes snow{0% { background-position:  bottom left 30px, 0 0;}100% { background-position: center 885px, 0 0;}
}*/
</style>
<body>

<h1>汽车在线投票系统<b>会员登录</b></h1>
<div class="content">
    <br>
<form action="log.php" method="post">
    <table>
        <tr>
            <td  align="right">用户名 </td>
            <td  align="left"><input style="width: 200px;" name="username" id="username" placeholder="请输入用户名">
                <span class="sure" >*</span>
                <span id="usernameTips"><img src="loading.gif" class="loading" style="width: 30px ">
</span>
            </td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td align="left"><input style="width: 200px;" type="password" name="pw" id="pw" placeholder="请输入密码">
                <span class="sure" >*</span></td>
        </tr>
        <tr>
            <td align="right">验证码</td>
            <td align="left">
                <input style="width: 200px;" name="code" placeholder="请输入图片中的验证码" id="code">
                <img style="margin-top: 15px" src="code.php"  onclick="this.src='code.php?' + new Date().getTime();" width="80" height="33">
            </td>

        </tr>
        <tr>
            <td style="background-color: white;padding-left:15px;height: 80px" align="right"><input style="background-color: #4391c3"  type="reset" value="重置"></td>
            <td style="background-color: white;" align="left">
                <input style="width: 70px;background-color: #4391c3" type="button" value="返回"  onclick="javascript:location.href='index.php'" class="return">
                <input style="width: 70px;margin-left:60px;background-color: #4391c3" type="submit" value="登录" onclick="jQueryCheck();"></td>
        </tr>
    </table>
</form>

</div>

</body>
<script src="js/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        $("#username").blur(function () {//焦点事件
            $.ajax({
                url:"checkUsername.php", //URL地址(发送请求地址)，用于处理异步查询
                data:{// data发送到服务器的数据
                    username :  $("#username").val()
                },
                type:"POST",// type请求方式 ("POST" 或 "GET")，
                dataType:"JSON",  //dataType预期服务器返回的数据类型
                success:function (data) { //success请求成功后的回调函数
                    $(".loading").hide();
                    if(data.error==1){//说明用户名被占用
                        $("#usernameTips").html("<span style ='color:white'><br>此用户名可用</span>");
                    }
                    else{//说明用户名未被占用
                        $("#usernameTips").html("<span style ='color:red'><br>当前没有该用户，先注册吧</span>");
                        $("#username").focus();//将焦点移动到用户名区域

                    }
                    if(data.error==2){
                        $("#usernameTips").html("<span style ='color:red'><br>用户名不能为空</span>");
                    }
                },
                beforeSend:function () {
                    $(".loading").show();

                },
                error:function (d1,d2,d3) {
                    $(".loading").hide();
                    //控制台显示错误原因
                    // console.log(d1);
                    // console.log(d2);
                    // console.log(d2);
                    alert('查询用户名是否占用出错')
                }
            })
        });
    });
    $(function () {
        $(".return").click(function () {
            location.href='index.php'
        })
    });
    function jQueryCheck() {
        var username,pw,code,errLog =0,errMsg ="";
        username =$("#username").val().trim();
        pw=$("#pw").val().trim();
        code = $("#code").val().trim();
        if(username==""){
            $errLog= 1;//检测到用户名为空，则表示产生错误。将错误标志置1
            $errMsg +="用户名必须填写\n";
        }
        if(pw==""){
            $errLog= 1;//检测到密码为空，则表示产生错误。将错误标志置1
            $errMsg +="密码必填\n";
        }
        if(code==""){
            $errLog= 1;//检测到验证码为空，则表示产生错误。将错误标志置1
            $errMsg +="验证码必填\n";
        }
        if(errLog==1){ //说明有错，则提示错误信息。
            alert(errMsg);
        }
    }
</script>
</html>
<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2018/9/12
 * Time: 9:22
 */